<template>
  <div class="picking zy-content " style="margin-bottom: 76px;">
    <back-level @click="close"/>
    <Card :title="$t('ledger.EquipmentScoring')" class="detail-content-layout">
      <div class="basic-info">
<!--        <div class="basic-info-title">-->
<!--          <h2>{{$t('ledger.EquipmentScoring')}}V2.0</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <Row class="no-line">
            <Col span="24" class="tableContent">
              <table border borderWidth="1" class="table detailTable">
                <thead>
                <tr>
                  <th>{{$t('ledger.Category')}}</th>
                  <th>{{$t('ledger.ScoreWeight')}}</th>
                  <th>{{$t('ledger.ScoringItem')}}</th>
                  <th>{{$t('ledger.Score')}}</th>
                  <th>{{$t('ledger.Equivalence')}}</th>
                  <th>{{$t('ledger.Metrics')}}</th>
                </tr>
                </thead>
                <tbody v-for="(item,index) in detailObj.dmsDeviceScoreCategoryList" :key="index">
                <template>
                  <tr :key="item.id"><td :rowspan="17">{{`${item.categoryName}(${item.categoryRate}%)`}}</td></tr>
                  <template v-for="scoreItem in item.dmsDeviceScoreItemList">
                    <tr :key="scoreItem.id">
                      <td :rowspan="scoreItem.dmsDeviceScoreStandardList.length + 1">{{`${scoreItem.itemShortName}(${scoreItem.itemRate}%)`}}</td>
                      <td :rowspan="scoreItem.dmsDeviceScoreStandardList.length + 1">{{scoreItem.itemName}}</td>
                      <td :rowspan="scoreItem.dmsDeviceScoreStandardList.length + 1">
                        <Input v-model="scoreItem.score" @on-change="scoreChange(item,scoreItem)"/>
                      </td>
                      <td :rowspan="scoreItem.dmsDeviceScoreStandardList.length + 1">{{scoreItem.convertScore}}</td>
                    </tr>
                    <template v-for="standItem in scoreItem.dmsDeviceScoreStandardList">
                      <tr :key="standItem.id">
                        <td>
                          {{`${standItem.grade}: ${standItem.standardDesc}`}}
                        </td>
                      </tr>
                    </template>
                  </template>
                </template>
                </tbody>
                <tfoot>
                <tr>
                  <td>总分</td>
                  <td colspan="5">{{sumCount}}</td>
                </tr>
                </tfoot>
              </table>
            </Col>
          </Row>
        </div>
      </div>
    </Card>
    <Card :title="$t('preliminary.Remarks')" class="detail-content-layout mt16">
      <div class="basic-info">
<!--        <div class="basic-info-title">-->
<!--          <h2>{{$t('preliminary.Remarks')}}</h2>-->
<!--        </div>-->
        <div class="basic-info-body">
          <Row>
            <Col :span="24"  class="tableContent">
              <Table
                  :columns="descColumns"
                  width="100%"
                  :data="descData"></Table>
            </Col>
          </Row>
        </div>
      </div>
    </Card>
    <bottomHandleWrap>
        <Button @click.prevent="close" class="ivu-btn-lg" style="margin-right: 15px;">{{$t('common.Cancle')}}</Button>
        <Button type="primary" class="ivu-btn-lg"  :loading="laoding" @click="handleSave">{{$t('maintenance.Confirmed')}}</Button>
    </bottomHandleWrap>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "ledgerDetailModal",
  data() {
    return {
      laoding: false,
      assetsList:[],
      sumCount:0,
      descColumns:[
        {
          title: this.$t('设备等级划分'),
          key: 'namevalue'
        },
        {
          title: this.$t('重要度'),
          key: 'importvalue'
        },
        {
          title: this.$t('D分值'),
          key: 'dvalue'
        }
      ],
      descData:[
        {
          namevalue: 'A',
          importvalue:  this.$t('关键设备'),
          dvalue: '＞ 60'
        },
        {
          namevalue: 'B',
          importvalue:  this.$t('次要设备'),
          dvalue: '30 - 60'
        },
        {
          namevalue: 'C',
          importvalue:  this.$t('一般设备'),
          dvalue: '≤ 30'
        },
      ],
      detailObj:{},
      timerId:''
    }
  },
  mounted() {
   this.getDetail()
  },
  methods: {
    getCount(dataList = []){
      let total = 0;
       dataList.forEach(val=>{
         if (val.dmsDeviceScoreItemList && val.dmsDeviceScoreItemList.length){
           val.dmsDeviceScoreItemList.forEach(list=>{
             total += Number(list.convertScore)
           })
         }
       })
      this.sumCount = total.toFixed(2);
    },
   scoreChange(item,scoreItem){
      // if (this.timerId) {
      //   clearTimeout(this.timerId)
      // }
      // this.timerId = setTimeout(() => {
        this.axios({
          method: 'get',
          url: '/dms/dmsDeviceScore/getConvertScore',
          params: {
            score:scoreItem.score,
            dmsDeviceScoreCategoryId:item.id,
            dmsDeviceScoreItemId:scoreItem.id
          }
        }).then(res=>{
          if (res.data){
            this.$set(scoreItem,'convertScore',Number(res.data))
            this.getCount(this.detailObj.dmsDeviceScoreCategoryList || [])
          }
        })
      // }, 500)
    },
    getDetail(){
      this.axios({
        method: 'get',
        url: '/dms/dmsDeviceScore/detail',
        params: {
          dmsDeviceId: this.$route.query.ids[0],
          sourceType: 1
        }
      }).then(res=>{
        this.detailObj = res.data
        this.getCount(res.data.dmsDeviceScoreCategoryList)
        // this.detailList = res.data.dmsDeviceScoreCategoryList
      })
    },
    close() {
      this.$router.go(-1)
    },
    handleSave() {
      let data  = {
        dmsDeviceScoreConfigId:this.detailObj.id,
        dmsDeviceScoreResultList:[]
      }

      let url = '';
      if(this.$route.query.ids.length > 0){
        url = '/dms/dmsDeviceScore/batchScore';
        data['dmsDeviceIds'] = this.$route.query.ids;
      }else{
        url = '/dmsDeviceScore/score';
        data['dmsDeviceId'] = this.$route.query.ids[0];
      }

      let status = false
      this.detailObj.dmsDeviceScoreCategoryList.forEach(item=>{
        if (item.dmsDeviceScoreItemList && item.dmsDeviceScoreItemList.length){
          item.dmsDeviceScoreItemList.forEach(list=>{
            if (!list.score || list.score==0){
              status = true
            }
            const obj = {
              score:Number(list.score),
              convertScore:list.convertScore,
              dmsDeviceScoreItemId:list.id
            }
            data.dmsDeviceScoreResultList.push(obj)
          })
        }
      })
      if (status){
        this.$Message.warning(({content:this.$t('请输入0以上的评分值'),duration:6,closable:true}));
        return;
      }
      this.laoding = true
      this.axios({
        method: 'post',
        url: url,
        data
      }).then(res => {
        if(res.code === 200){
          this.$router.go(-1)
          this.$Message.success(({content:'保存成功！',duration:3,closable:true}));
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
        this.laoding = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.basic-info {
  .detailTable{
    border-color: rgba(232, 234, 236, .28) !important;
    border-width: 1px !important;
    thead tr th,tfoot tr td{
      text-align: center; font-size: 15px;

    }
    //table{/**/

    //}
    tr{
      td{
        background: transparent !important;
      }
    }

    tr td,tr th{
      font-size: 13px;
      text-align: center;
      vertical-align:middle;
      border:  #e8eaec solid 1px;
    }
    tr th{
      background: #f8f8f9;
      //border: #fff solid 1px;
    }
  }
  .basic-info-title {
    span {
      display: inline-block;
      width: 7px;
      height: 24px;
      background: #187bdb;
    }
    h2 {
      display: inline-block;
      font-size: 16px;
      padding-left: 10px;
      position: relative;
      &::before {
        content:"";
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 24px;
        background: #187bdb;
      }
    }
  }
  .basic-info-body {
    //margin: 10px;
    color: #333;
    font-size: 13px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    .basic-info-body-label {
      display: inline-block;
      width: 40%;
      height: 48px;
      line-height: 48px;
      background: #f5f6f7;
      text-align: right;
      padding-right: 10px;
      /*border-left: 1px solid #B6B7B7;*/
      /*border-top: 1px solid #B6B7B7;*/
      /*border-bottom: 1px solid #B6B7B7;*/
    }
    .basic-info-body-item {
      display: inline-block;
      width: 60%;
      height: 48px;
      line-height: 48px;
      text-align: left;
      padding: 0 10px;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      /*border-right: 1px solid #B6B7B7;*/
      /*border-top: 1px solid #B6B7B7;*/
      /*border-bottom: 1px solid #B6B7B7;*/
    }
  }
}
.over-wrapper {
  max-width: 200px;
  /*height: 23px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style lang="scss">
.no-line:before{
  display: none;
}
</style>
